<template>
  <div id="khxx-list">
    <div>
      <el-button :disabled="delAllDisable" type="danger" @click="delAll"
        >删除选中条目</el-button
      >
    </div>
    <br />
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="tableData"
      border
      style="width: 100%"
      highlight-current-row
      height="70vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerName"
        label="客户名称"
        width="200"
        fixed
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerId"
        label="编号"
        width="50"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerArea"
        label="客户地区"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerIndustry"
        label="客户行业"
        width="120"
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="customerGrade" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerGradeStr"
        label="客户等级"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerSatisfaction"
        label="满意度"
        width="80"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerCreditLine"
        label="信用度"
        width="80"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerAddress"
        label="客户地址"
        width="280"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerPostcode"
        label="客户邮编"
        width="80"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerPhone"
        label="联系电话"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerFax"
        label="客户传真"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerUrl"
        label="客户网站"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerBusinessLicense"
        label="营业执照注册号"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerLegalPerson"
        label="法人"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerRegisteredCapital"
        label="注册资金"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerAnnualSalesVolume"
        label="年营业额"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerDepositBank"
        label="开户银行"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerLandTaxId"
        label="地税登录号"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerNationalTax"
        label="国税登记号"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerBankAccount"
        label="银行账号"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerState"
        label="状态"
        width="80"
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="customerCid" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="accountManager.name"
        label="负责人"
        width="120"
      >
      </el-table-column>

      <el-table-column
        :resizable="false"
        fixed="right"
        label="操作"
        width="240"
      >
        <template slot-scope="scope">
          <!-- v-if="scope.row.customerState == 1001" -->
          <el-button
            :disabled="scope.row.customerState != '正常'"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            :disabled="scope.row.customerState != '正常'"
            size="mini"
            type="success"
            @click="handleOrderAdd(scope.$index, scope.row)"
            >添加订单</el-button
          >
          <el-button
            :disabled="scope.row.customerState != '正常'"
            slot="reference"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="修改客户信息"
      :visible.sync="dialogToVisible"
      width="80vw"
    >
      <el-form
        label-position="right"
        label-width="120px"
        ref="formLabelTo"
        :model="formLabelTo"
        :rules="rulesTo"
        inline
        ><!-- :inline="true":自动多行处理 -->
        <el-form-item label="客户地区" prop="customerArea">
          <el-input
            placeholder="请输入客户地区"
            v-model="formLabelTo.customerArea"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户行业" prop="customerIndustry">
          <el-input
            placeholder="请输入客户行业"
            v-model="formLabelTo.customerIndustry"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户等级" prop="customerGrade">
          <el-select
            style="width: 100%"
            v-model="formLabelTo.customerGrade"
            placeholder="请选择客户等级"
          >
            <el-option
              v-for="item in [
                { id: 'A', tip: '重点客户' },
                { id: 'B', tip: '普通客户' },
                { id: 'C', tip: '非优先客户' },
              ]"
              :key="item.id"
              :label="item.tip"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="满意度" prop="customerSatisfaction">
          <el-rate
            style="padding-top: 10px"
            v-model="formLabelTo.customerSatisfaction"
          ></el-rate>
        </el-form-item>
        <el-form-item label="信用度" prop="customerCreditLine">
          <el-rate
            style="padding-top: 10px"
            v-model="formLabelTo.customerCreditLine"
          ></el-rate>
        </el-form-item>
        <el-form-item label="客户地址" prop="customerAddress">
          <el-input
            placeholder="请输入客户地址"
            v-model="formLabelTo.customerAddress"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户邮编" prop="customerPostcode">
          <el-input
            placeholder="请输入客户邮编"
            v-model.number="formLabelTo.customerPostcode"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="customerPhone">
          <el-input
            placeholder="请输入联系人电话"
            v-model.number="formLabelTo.customerPhone"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户传真" prop="customerFax">
          <el-input
            placeholder="请输入客户传真"
            v-model="formLabelTo.customerFax"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户网站" prop="customerUrl">
          <el-input
            placeholder="请输入客户网站"
            v-model="formLabelTo.customerUrl"
          ></el-input>
        </el-form-item>
        <el-form-item label="营业执照注册号" prop="customerBusinessLicense">
          <el-input
            placeholder="请输入营业执照注册号"
            v-model="formLabelTo.customerBusinessLicense"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人" prop="customerLegalPerson">
          <el-input
            placeholder="请输入法人名称"
            v-model="formLabelTo.customerLegalPerson"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册资金" prop="customerRegisteredCapital">
          <el-input
            placeholder="请输入注册资金"
            v-model.number="formLabelTo.customerRegisteredCapital"
          ></el-input>
        </el-form-item>
        <el-form-item label="年营业额" prop="customerAnnualSalesVolume">
          <el-input
            placeholder="请输入年营业额"
            v-model.number="formLabelTo.customerAnnualSalesVolume"
          ></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="customerDepositBank">
          <el-input
            placeholder="请输入开户银行"
            v-model="formLabelTo.customerDepositBank"
          ></el-input>
        </el-form-item>
        <el-form-item label="地税登录号" prop="customerLandTaxId">
          <el-input
            placeholder="请输入地税登录号"
            v-model="formLabelTo.customerLandTaxId"
          ></el-input>
        </el-form-item>
        <el-form-item label="国税登记号" prop="customerNationalTax">
          <el-input
            placeholder="请输入国税登记号"
            v-model="formLabelTo.customerNationalTax"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="customerBankAccount">
          <el-input
            style="width: 20vw"
            placeholder="请输入银行账号"
            v-model="formLabelTo.customerBankAccount"
          ></el-input>
        </el-form-item>

        <div style="padding-top: 10px"></div>
        <el-form-item>
          <el-button
            type="primary"
            :round="true"
            @click="submitFormTo('formLabelTo')"
            style="width: 20vw"
            >修 改</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitFormTo('formLabelTo')">
          立即创建
        </el-button> -->
        <el-button @click="dialogToVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加订单" :visible.sync="dialogFormVisible" width="40vw"
      ><el-form
        label-position="right"
        label-width="110px"
        ref="formLabelAlign"
        :model="formLabelAlign"
        :rules="rules"
        ><!-- :inline="true":自动多行处理 -->
        <el-form-item prop="ordersId">
          <el-input v-if="false" v-model="formLabelAlign.ordersId"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="ordersDate">
          <el-date-picker
            style="width: 100%"
            v-model="formLabelAlign.ordersDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单金额" prop="ordersAmount">
          <el-input-number
            :min="0"
            style="width: 100%"
            placeholder="请输入订单金额"
            v-model="formLabelAlign.ordersAmount"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="送货地址" prop="shippingAddress">
          <el-input
            placeholder="请输入送货地址"
            v-model="formLabelAlign.shippingAddress"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
          <el-select
            style="width: 100%"
            v-model="formLabelAlign.orderStatus"
            placeholder="请选择订单状态"
          >
            <el-option
              v-for="item in [
                { name: '未付款' },
                { name: '已付款' },
                { name: '已发货' },
                { name: '已收货' },
                { name: '已退货' },
              ]"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="false" prop="customerId">
          <el-input v-model="formLabelAlign.customerId"></el-input>
        </el-form-item>

        <!-- <div style="padding-top: 10px"></div>
        <el-form-item>
          <el-button
            type="primary"
            :round="true"
            @click="submitForm('formLabelAlign')"
            style="width: 20vw"
            >立即创建</el-button
          >
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formLabelAlign')">
          创 建
        </el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let checkNum1 = (rule, value, callback) => {
      let err = new Error("请输入正确的电话号码!");
      if (!value) {
        return callback(err);
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(err);
        } else {
          if ((value + "").length != 11) {
            callback(err);
          } else {
            callback();
          }
        }
      }, 20);
    };
    let checkNum2 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入注册资金!"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("注册资金必须为数字值"));
        } else {
          if (value < 10000) {
            callback(new Error("注册资金必须大于10000"));
          } else {
            callback();
          }
        }
      }, 20);
    };
    let checkNum3 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入年营业额!"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("年营业额必须为数字值"));
        } else {
          if (value < 100) {
            callback(new Error("年营业额必须大于100"));
          } else {
            callback();
          }
        }
      }, 20);
    };
    return {
      loading: true,
      tableData: null,
      delAllDisable: true,
      dialogFormVisible: false,
      dialogToVisible: false,
      formLabelTo: {
        customerId: null, // ID
        customerCid: null, // CID
        customerArea: null, // 客户地区
        customerIndustry: null, // 客户行业
        customerGrade: null, // 客户等级
        customerSatisfaction: 3, // 满意度
        customerCreditLine: 3, // 信用度
        customerAddress: null, // 客户地址
        customerPostcode: null, // 客户邮编
        customerPhone: null, // 联系电话
        customerFax: null, // 客户传真
        customerUrl: null, // 客户网站
        customerBusinessLicense: null, // 营业执照注册号
        customerLegalPerson: null, // 法人
        customerRegisteredCapital: null, // 注册资金
        customerAnnualSalesVolume: null, //年营业额
        customerDepositBank: null, // 开户银行
        customerLandTaxId: null, // 地税登录号
        customerNationalTax: null, // 国税登记号
        customerBankAccount: null, // 银行账号
      },
      rulesTo: {
        customerArea1: [{ required: true, message: "请输入客户名称!" }],
        opp_id: [{ required: true, message: "请选择机会来源!" }],
        opp_description: [{ required: true, message: "请输入机会来源描述!" }],
        sc_contact: [{ required: true, message: "请输入联系人!" }],
        sc_contact_number: [
          { required: true, message: "电话号码不能为空!" },
          { type: "number", message: "电话号码必须为数字值" },
          { validator: checkNum1 },
        ],
        sc_outline: [{ required: true, message: "请输入概要!" }],

        customerArea: [{ required: true, message: "请输入客户地区!" }],
        customerIndustry: [{ required: true, message: "请输入客户行业!" }],
        customerGrade: [{ required: true, message: "请输入客户等级!" }],
        customerSatisfaction: [{ required: true, message: "请输入满意度!" }],
        customerCreditLine: [{ required: true, message: "请输入信用度!" }],
        customerAddress: [{ required: true, message: "请输入客户地址!" }],
        customerPostcode: [{ required: true, message: "请输入客户邮编!" }],
        customerPhone: [
          { required: true, message: "请输入联系电话!" },
          { validator: checkNum1 },
        ],
        customerFax: [{ required: true, message: "请输入客户传真!" }],
        customerUrl: [{ required: true, message: "请输入客户网站!" }],
        customerBusinessLicense: [
          { required: true, message: "请输入营业执照注册号!" },
        ],
        customerLegalPerson: [{ required: true, message: "请输入法人!" }],
        customerRegisteredCapital: [
          { required: true, message: "请输入注册资金!" },
          { validator: checkNum2 },
        ],
        customerAnnualSalesVolume: [
          { required: true, message: "请输入年营业额!" },
          { validator: checkNum3 },
        ],
        customerDepositBank: [{ required: true, message: "请输入开户银行!" }],
        customerLandTaxId: [{ required: true, message: "请输入地税登录号!" }],
        customerNationalTax: [{ required: true, message: "请输入国税登记号!" }],
        customerBankAccount: [{ required: true, message: "请输入银行账号!" }],
      },
      formLabelAlign: {
        ordersId: null,
        ordersDate: "", //日期
        ordersAmount: "", //订单金额
        shippingAddress: "", //送货地址
        orderStatus: "", //订单状态
        customerId: "", //客户编号
      },
      rules: {
        ordersDate: [{ required: true, message: "请输入日期!" }],
        ordersAmount: [{ required: true, message: "请输入订单金额!" }],
        shippingAddress: [{ required: true, message: "请输入送货地址!" }],
        orderStatus: [{ required: true, message: "请输入订单状态!" }],
      },
    };
  },
  created: function () {
    this.initTableData();
  },
  methods: {
    initTableData() {
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/customer/list",
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据 列表信息
        this.tableData = response.data.data[0];
        this.tableData.forEach((e) => {
          // 客户等级map
          switch (e.customerGrade) {
            case "A":
              e.customerGradeStr = "重点客户";
              break;
            case "B":
              e.customerGradeStr = "普通客户";
              break;
            case "C":
              e.customerGradeStr = "非优先客户";
              break;
            default:
              e.customerGradeStr = "未知";
              break;
          }
        });
        this.loading = false;
      });
    },
    handleSelectionChange(val) {
      // console.log(val);
      this.delAllDisable = val.length == 0;
    },
    delAll() {
      // console.log(this.$refs.tableData.selection);
      this.$confirm(`此操作将永久删除选中的条目, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$refs.tableData.selection.forEach((row) => {
          // console.log("row",row);
          this.$axios({
            method: "delete",
            crossdomain: true,
            url: "/customer/del/" + row.customerId,
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.tableData.splice(index, 1);
              this.initTableData();
              this.$notify({
                title: "删除成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
            } else {
              this.$notify({
                title: "删除失败惹",
                type: "error",
                message: response.data.msg,
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        });
      });
    },
    handleEdit(index, row) {
      this.formLabelTo = JSON.parse(JSON.stringify(row));
      // this.formLabelTo.row = row; // 添加原型数据方便修改
      this.dialogToVisible = true;
      // console.log(this.formLabelTo); //查看转换后
      // console.log("edit", index, row);
    },
    handleDelete(index, row) {
      this.$confirm(
        `此操作将永久删除条目<${row.customerName}>, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$axios({
          method: "delete",
          crossdomain: true,
          url: "/customer/del/" + row.customerId,
        }).then((response) => {
          // console.log(response); //请求成功返回的数据
          if (response.data.type == "OK") {
            this.tableData.splice(index, 1);
            this.$notify({
              title: "删除成功啦",
              type: "success",
              duration: "1000", // 1000ms后关闭
              showClose: false,
            });
            // this.$router.replace({ path: "/" });
          } else {
            this.$notify({
              title: "删除失败惹",
              type: "error",
              duration: "4000", // 1000ms后关闭
              showClose: false,
            });
          }
        });
      });

      // console.log("delete", index, row);
    },
    submitFormTo(formName) {
      // console.log("submitTo",this.formLabelTo);
      this.$refs[formName].validate((valid) => {
        this.formLabelTo.accountManager = undefined;
        // this.formLabelTo.splice(Object.keys(this.formLabelTo).indexOf('accountManager'),1);
        // console.log(this.formLabelTo);
        // console.log(this.$qs.stringify(this.formLabelTo));
        if (valid) {
          this.$axios({
            method: "put",
            crossdomain: true,
            url: "/customer/update?" + this.$qs.stringify(this.formLabelTo),
            // params: ,
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              this.$notify({
                title: "客户修改成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              this.initTableData(); // 更改状态
              this.dialogToVisible = false;
              //   this.$router.replace({ path: "/" });
            } else {
              this.$notify({
                title: "失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
    handleOrderAdd(index, row) {
      // this.formLabelAlign = JSON.parse(JSON.stringify(row));
      this.formLabelAlign.customerId = row.customerId; // 添加原型数据方便修改
      this.dialogFormVisible = true;
      // console.log(this.formLabelAlign); //查看转换后
      // console.log("edit", index, row);
    },
    submitForm(formName) {
      // console.log(this.formLabelAlign); return false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            crossdomain: true,
            url: "/orders/add",
            data: this.$qs.stringify(this.formLabelAlign),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              this.dialogFormVisible = false;
              this.$notify({
                title: "添加成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              //   this.$router.replace({ path: "/" });
              this.formLabelAlign = {
                ordersId: null,
                ordersDate: "", //日期
                ordersAmount: "", //订单金额
                shippingAddress: "", //送货地址
                orderStatus: "", //订单状态
                customerId: "", //客户编号
              };
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>
